<template>
<div class="rage">
    <div class="loading-wrapper" v-if="isloading" >
          <div class="loading"></div>
          <div class="loading-txt">努力奔跑中</div>
    </div>
    <div  v-show="!isloading">
    <div class='slide'>
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,index) in playList" :key='index'><img :src="item.coverImgUrl" alt=""></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>           
      </swiper>
    </div>
    <div class='recommend'>
      <div class='combar recommend-song'>推荐歌单<router-link :to="{path: '/index/songList'}">更多></router-link></div>
      <div class="comlist recommend-list">
        <mu-flexbox wrap='wrap' justify="space-around" :gutter="0">
          <mu-flexbox-item basis="28%" class="item" :key="item.id" v-for='item in playList' >
            <router-link :to="{name:'playListDetail',params: { id:item.id,name:item.name,coverImg: item.coverImgUrl, creator: item.creator, count: item.playCount, desc: item.description}}" class="tosong">
              <div class="listbar">{{item.playCount|total}}</div>
              <img  alt="" v-lazy="item.coverImgUrl" lazy="loading">
              
              <div class="bottomname">{{item.name}}</div>
            </router-link>
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
      <div class='combar mv'>推荐MV<router-link :to="{path: '/index/songList'}">更多></router-link></div>
      <div class="comlist recommend-list">
        <mu-flexbox wrap='wrap' justify="space-around" :gutter="0">
          <mu-flexbox-item basis="40%" class="item" v-for='n in 4' :key='n' >
            <router-link to='songList' class="tosong">
              <img class="img-response" :src="mv.cover" >
              <div class="mv-name">{{mv.briefDesc}}</div>
              <div class="mv-author">{{mv.artistName}}</div>
            </router-link>
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
    </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .swiper-slide{
    img{
      width: 100%;
      height: 7.4rem;
      // background-size: cover;
    }
  }
  //通用标题样式
  .combar{
    padding-left: 25px;
    color: #333;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    a {
      float: right;
      font-size: 12px;
      color: #666;
    }
  }
  .recommend{
    padding: 0 5px;
    .recommend-song{
      background: url("../assets/images/recommend.png") no-repeat left center;
      background-size: 20px 20px;
    }
    .item{
      position: relative;
      margin: 0 5px 5px 10px;
      height: 100%;
    }
    .tosong{
      width: 100%;
      color: rgba(0,0,0,0.8);
      .listbar{
        width: 100%;
        background: rgba(0,0,0,0.2);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-align: right;
        padding: 2px 5px;
      }
      img{
        min-height: 5rem;
        min-width: 5rem;
        height: auto;
        max-width: 100%;
      }
      img[lazy=loading]{
        background: url('../assets/images/default_cover.png') no-repeat;
        background-size: cover;
      }
      .bottomname{
            overflow: hidden;
          font-size: 12px;
          height: 1.7rem;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
      }
    }
    .mv {
      background: url("../assets/images/recommend.png") no-repeat left center;
      background-size: 20px 20px;
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .item {
        position: relative;
        margin: 0 5px 5px 10px;
      }
      .author {
        font-size: 12px;
        color: #666;
      }
      .tomv{
        width: 100%;
        color: rgba(0,0,0,0.8);
        .listbar{
          width: 100%;
          background: rgba(0,0,0,0.2);
          position: absolute;
          top: 0;
          left: 0;
          color: #fff;
          text-align: right;
          padding: 2px 5px;
        }
        img{
          min-height: 5rem;
          min-width: 5rem;
          height: auto;
          max-width: 100%;
        }
        img[lazy=loading]{
        background: url('../assets/images/default_cover.png') no-repeat;
        background-size: cover;
      } 
      }
    }
  }
  
  .loading{
    position: absolute;
    top: 0;
    left: 50%;
    background: #fff;
    width: 3rem;
    height: 3rem;
    margin-top: 70%;
    margin-left: -1.5rem;
    background: url('../assets/images/rage_loading.png') no-repeat;
    background-size: cover;
    -webkit-animation: rotating 5s  linear infinite;
    animation: rotating 5s linear infinite;
  }
  .loading-txt {
    position: absolute;
    top:0;
    color: #4a4a4a;
    margin-top: 90%;
    width: 100%;
    text-align:center;
  }
  @keyframes rotating {
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
  }
</style>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import api from '../api/api.js'
export default {
    data(){
        return{
          swiperOption: {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay:3000,
            loop : true,
            autoplayDisableOnInteraction:false
          },
          isloading:true,
          playList:[],
          mv:{}
        }
    },
    created(){
      this.get();
    },
    components: {
      swiper,
      swiperSlide
    },
    methods:{
      get(){
        this.$http.get(api.getPlayListByWhere('全部', 'hot', 0, true, 6)).then((res) => {
          this.isloading = false
          this.playList = res.data.playlists
        })
        this.$http.get(api.getMv(5448075)).then((res) => {
          this.mv = res.data.data
        })
        // this.$http.get('https://api.imjad.cn/cloudmusic/?type=mv&id=5390067&br=128000').then((res) => {
        //   this.mv = res.data.data
        // })
        
      }
    },
    filters:{
      total(n){
        if(n<9999){
          return n
        }
        else{
          return (n/10000).toFixed(0)+'万'
        }
      }
    }
}
</script>
